<template>
  <div style='padding-bottom: 60px'>
    <title-panel title="基础信息"/>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 38%">销售批次</div>
        <div class="line-text-out text-right" style="width: 60%">
          {{ obj.salesBatchNo }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%">销售日期</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.salesDate }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 60%">销售金额（元）</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.salesAmount }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%">销售去向</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.subjectEnterpriseInfo.enterpriseName }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 60%">生鲜乳总数量（kg）</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.freshMilkTotal }}
        </div>
      </div>
    </van-cell>
    <div v-if='milkStationFlag == 0'>
      <title-panel title="自产信息"/>
      <van-cell>
        <div class="flex-between col-333333">
          <div class="m-r-10" style="width: 60%">生鲜乳数量（kg）</div>
          <div class="line-text-out text-right" style="width: 68%">
            {{ obj.selfFreshMilkTotal }}
          </div>
        </div>
      </van-cell>
    </div>
    <div v-if='milkStationFlag == 0'>
      <title-panel title="收购明细"/>
      <div v-for="(item, index) in obj.saleInfoModels" :key="index" >
        <div v-if='key != 0' style='height: 10px'></div>
        <van-cell>
          <div class="flex-between col-333333">
            <div class="m-r-10" style="width: 40%">鲜奶来源</div>
            <div class="line-text-out text-right" style="width: 68%">
              {{ item.sourceEnterpriseName }}
            </div>
          </div>
        </van-cell>
        <van-cell>
          <div class="flex-between col-333333">
            <div class="m-r-10" style="width: 40%">销售批次</div>
            <div class="line-text-out text-right" style="width: 68%">
              {{ item.salesBatchNo }}
            </div>
          </div>
        </van-cell>
        <van-cell>
          <div class="flex-between col-333333">
            <div class="m-r-10" style="width: 60%">生鲜乳数量（kg）</div>
            <div class="line-text-out text-right" style="width: 68%">
              {{ item.freshMilkTotal }}
            </div>
          </div>
        </van-cell>
      </div>
    </div>
    <div v-if='obj.reasonForCancellation != null'>
      <title-panel title="作废信息"/>
      <van-cell>
        <div class="flex-between col-333333">
          <div class="m-r-10" style="width: 40%">作废原因</div>
          <div class="line-text-out text-right" style="width: 68%">
            {{ obj.reasonForCancellation }}
          </div>
        </div>
      </van-cell>
    </div>
  </div>
</template>
<script>
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Cell,
  Popup,
  Image
} from 'vant'
import TitlePanel from '@/components/titlePanel'
import { getValue, clearValue } from '@/utils/auth'
import { getHandle } from '../../api'
export default {
  components: {
    TitlePanel,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Image.name]: Image,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      obj: {
        subjectEnterpriseInfo: {}
      },
      milkStationFlag:getValue('milkStationFlag')
    }
  },
  created() {
  },
  mounted() {
    const sourceInfo = JSON.parse(getValue('sourceInfo'))
    if (sourceInfo !== null) {
      this.getData(sourceInfo.id)
    }
    // clearValue('sourceInfo')
  },
  methods: {
    getData(id) {
      getHandle(`/agri/api/yzbzh/saleInfo/queryDetail/${id}`).then(res => {
        this.obj = Object.assign({}, this.obj, res.data)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.van-cell {
  line-height: 40px;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 2em;
}
.m-r-10 {
  margin-right: 10px;
}
.line-text-out {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.col-1b1b {
  color: #1b1b1b;
}
.col-8686 {
  color: #868686;
}
::v-deep .van-cell {
  border-bottom: 1px solid #dbd8d8;
}
.imgstyle::after {
  content: '';
  width: 100px;
}
.footerImg {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #37b5b5;
  > img {
    width: 22px;
    height: 22px;
  }
}
.shop .bottom {
  position: fixed;
  bottom: 0;
  height: 68px;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  padding: 8px 10px 8px 14px;
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-top: 2px;
}
</style>
